import React, {lazy, Suspense} from 'react';
import {setScrollTop,changeTdk,goSystem} from '../../assets/js/utils/index';
import request from '../../assets/js/utils/request';
// import {connect} from 'react-redux';
// import action from '../../store/action';
import hoc from './indexhoc';
import 'swiper/swiper-bundle.css';
import Css from '../../assets/css/growingup/index.css';
import ScrollAnim from 'rc-scroll-anim';
//挂载 Mock
//import '../../mock/data.js'

const Nav=lazy(()=>import('../../components/nav/index'));
const RNav=lazy(()=>import('../../components/rNav/index'));
const Foot=lazy(()=>import('../../components/foot/index'));
const ScrollParallax =  ScrollAnim.Parallax;
const Group=hoc((props)=>{
    console.log(props)
    return(
        <div>
            {
                props.aBan!==undefined?
                    props.aBan.map((item,index)=>{
                        return(
                            <div className={Css['gro_banner']} id='indSuccess' key={index}>
                                <ScrollParallax
                                    className={Css['gro_ban_bg']}
                                    location='indSuccess'
                                    style={{backgroundImage:'url('+item.img+')'}}
                                    animation={{y:0, playScale: [0.9, 1.5]}}
                                ></ScrollParallax>
                                <div className={Css['groBanCen']}>
                                    <p>
                                        <strong>{item.title}</strong>
                                        {item.list}
                                    </p>
                                    <div className={Css['groBanBtn']} onClick={props.goPages.bind(this,item.url)}>{item.btn}</div>
                                </div>
                            </div>
                        )
                    })
                    :''
            }
            <div className={Css['guPlatformCen']}>
                <div className={Css['guPlaTitle']}>
                    <strong>把更好的福利“给到”员工</strong>
                    <p>
                        一站式全场景福利平台<br/>
                        统筹福利管理，覆盖多维需求，升级福利体验
                    </p>
                </div>
                <div className={Css['guPlaImg']}>
                    <div >
                        <div className={Css['guPlaBgCs']}></div>
                        <div className={Css['guPlaBgCsZ']}></div>
                        <div className={Css['guPlaBgCsQ']}></div>
                        <div className={Css['whitd']}>
                            <div className={Css['guPlaBgFf']} >B2B企业服务</div>
                            <div className={Css['guPlaSj']} >
                                <img src="../../assets/images/commen/loading.gif" data-echo="../../assets/images/comment/gu14.png" alt=''/>
                            </div>
                        </div>
                        <div className={Css['guPlaFont1']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op8']+' '+Css['fs20']}>员工培训</div>
                        <div className={Css['guPlaFont2']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op8']+' '+Css['fs20']}>弹性福利</div>
                        <div className={Css['guPlaFont3']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op8']+' '+Css['fs16']}>激励认可</div>
                        <div className={Css['guPlaFont4']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op8']+' '+Css['fs12']}>交通午餐</div>
                        <div className={Css['guPlaFont5']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op8']+' '+Css['fs20']}>激励认可</div>
                        <div className={Css['guPlaFont6']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>心理关怀</div>
                        <div className={Css['guPlaFont7']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs16']}>弹性福利</div>
                        <div className={Css['guPlaFont8']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs16']}>员工培训</div>
                        <div className={Css['guPlaFont9']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op8']+' '+Css['fs20']}>交通午餐</div>
                        <div className={Css['guPlaFont10']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>员工培训</div>
                        <div className={Css['guPlaFont11']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>激励认可</div>
                        <div className={Css['guPlaFont12']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs16']}>心理关怀</div>
                        <div className={Css['guPlaFont13']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>心理关怀</div>
                        <div className={Css['guPlaFont14']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>激励认可</div>
                        <div className={Css['guPlaFont15']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op8']+' '+Css['fs20']}>员工培训</div>
                        <div className={Css['guPlaFont16']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op8']+' '+Css['fs20']}>交通午餐</div>
                        <div className={Css['guPlaFont17']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op8']+' '+Css['fs20']}>节日福利</div>
                        <div className={Css['guPlaFont18']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs20']}>心理关怀</div>
                        <div className={Css['guPlaFont19']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>交通午餐</div>
                        <div className={Css['guPlaFont20']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op8']+' '+Css['fs20']}>弹性福利</div>
                        <div className={Css['guPlaFont21']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs16']}>交通午餐</div>
                        <div className={Css['guPlaFont22']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs20']}>激励认可</div>
                        <div className={Css['guPlaFont23']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>员工培训</div>
                        <div className={Css['guPlaFont24']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>员工培训</div>
                        <div className={Css['guPlaFont25']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs20']}>心理关怀</div>
                        <div className={Css['guPlaFont26']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs20']}>节日福利</div>
                        <div className={Css['guPlaFont27']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>节日福利</div>
                        <div className={Css['guPlaFont28']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs16']}>心理关怀</div>
                        <div className={Css['guPlaFont29']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs14']}>员工培训</div>
                        <div className={Css['guPlaFont30']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs16']}>弹性福利</div>
                        <div className={Css['guPlaFont31']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op8']+' '+Css['fs20']}>心理关怀</div>
                        <div className={Css['guPlaFont32']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs16']}>员工培训</div>
                        <div className={Css['guPlaFont33']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs20']}>交通午餐</div>
                        <div className={Css['guPlaFont34']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>交通午餐</div>
                        <div className={Css['guPlaFont35']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs20']}>员工培训</div>
                        <div className={Css['guPlaFont36']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs16']}>激励认可</div>
                        <div className={Css['guPlaFont37']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>节日福利</div>
                        <div className={Css['guPlaFont38']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs20']}>节日福利</div>
                        <div className={Css['guPlaFont39']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs12']}>心理关怀</div>
                        <div className={Css['guPlaFont40']+' '+Css['coloc']+' '+Css['fw']+' '+Css['op3']+' '+Css['fs20']}>心理关怀</div>
                        <div className={Css['guPlaFont41']+' '+Css['fw']+' '+Css['fs20']}>B2B2C员工服务</div>
                    </div>

                    <div className={Css['roull']+' '+Css['roull1']}></div>
                    <div className={Css['roull']+' '+Css['roull2']}></div>
                    <div className={Css['roull']+' '+Css['roull3']}></div>
                    <div className={Css['roull']+' '+Css['roull2']+' '+Css['roull4']}></div>
                    <div className={Css['roull']+' '+Css['roull1']+' '+Css['roull5']}></div>
                    <div className={Css['roull']+' '+Css['roull1']+' '+Css['roull6']}></div>
                    <div className={Css['roull']+' '+Css['roull2']+' '+Css['roull7']}></div>
                    <div className={Css['roull']+' '+Css['roull3']+' '+Css['roull8']}></div>
                    <div className={Css['roull']+' '+Css['roull1']+' '+Css['roull9']}></div>
                    <div className={Css['roull']+' '+Css['roull1']+' '+Css['roull10']}></div>
                    <div className={Css['roull']+' '+Css['roull2']+' '+Css['roull12']}></div>
                    <div className="">
                        <div className={Css['guPlaDS']}>
                            <div className={Css['guPlaIcn']}>
                                <p>
                                    <img src="../../assets/images/commen/loading.gif" data-echo={require('../../assets/images/growingup/gu15.png')} alt=''/>
                                    电商
                                </p>
                            </div>
                            <div className={Css['guPlaDSLinr']+' '+Css['borL']+' '+Css['borB']}></div>
                        </div>
                        <div className={Css['guPlaDS1']}>
                            <div className={Css['guPlaIcn']}>
                                <p>
                                    <img src="../../assets/images/commen/loading.gif" data-echo={require('../../assets/images/growingup/gu16.png')}alt=''/>
                                    旅游
                                </p>
                            </div>
                            <div className={Css['guPlaDSLinr']+' '+Css['borL']+' '+Css['borT']}></div>
                            <div className={Css['guPlaDSLinr1']+' '+Css['borL']}></div>
                        </div>
                        <div className={Css['guPlaDS2']}>
                            <div className={Css['guPlaIcn']}>
                                <p>
                                    <img src="../../assets/images/commen/loading.gif" data-echo={require('../../assets/images/growingup/gu17.png')} alt=''/>
                                    保险
                                </p>
                            </div>
                            <div className={Css['guPlaDSLinr']+' '+Css['borB']+' '+Css['borR']}></div>
                        </div>
                        <div className={Css['guPlaDS3']}>
                            <div className={Css['guPlaIcn']}>
                                <p>
                                    <img src="../../assets/images/commen/loading.gif" data-echo={require('../../assets/images/growingup/gu18.png')} alt=''/>
                                    团建
                                </p>
                            </div>
                            <div className={Css['guPlaDSLinr']+' '+Css['borB']+' '+Css['borR']}></div>
                        </div>
                        <div className={Css['guPlaDS4']}>
                            <div className={Css['guPlaIcn']}>
                                <p>
                                    <img src="../../assets/images/commen/loading.gif" data-echo={require('../../assets/images/growingup/gu19.png')} alt=''/>
                                    党建
                                </p>
                            </div>
                            <div className={Css['guPlaDSLinr']+' '+Css['borT']+' '+Css['borR']}></div>
                        </div>
                        <div className={Css['guPlaDS5']}>
                            <div className={Css['guPlaIcn']}>
                                <p>
                                    <img src="../../assets/images/commen/loading.gif" data-echo={require('../../assets/images/growingup/gu20.png')} alt=''/>
                                    订餐
                                </p>
                            </div>
                            <div className={Css['guPlaDSLinr']+' '+Css['borT']+' '+Css['borR']}></div>
                        </div>
                        <div className={Css['guPlaDS6']}>
                            <div className={Css['guPlaIcn']}>
                                <p>
                                    <img src="../../assets/images/commen/loading.gif" data-echo={require('../../assets/images/growingup/gu21.png')} alt=''/>
                                    交友
                                </p>
                            </div>
                            <div className={Css['guPlaDSLinr']+' '+Css['borT']+' '+Css['borL']}></div>
                        </div>
                        <div className={Css['guPlaDS7']}>
                            <div className={Css['guPlaIcn']}>
                                <p>
                                    <img src="../../assets/images/commen/loading.gif" data-echo={require('../../assets/images/growingup/gu22.png')} alt=''/>
                                    健康
                                </p>
                            </div>
                            <div className={Css['guPlaDSLinr']+' '+Css['borB']+' '+Css['borL']}></div>
                            <div className={Css['guPlaDSLinr']+' '+Css['borT']+' '+Css['borL']}></div>
                        </div>
                        <div className={Css['guPlaDS8']}>
                            <div className={Css['guPlaIcn']}>
                                <p>
                                    <img src="../../assets/images/commen/loading.gif" data-echo={require('../../assets/images/growingup/gu23.png')} alt=''/>
                                    用车
                                </p>
                            </div>
                            <div className={Css['guPlaDSLinr']+' '+Css['borB']+' '+Css['borL']}></div>
                            <div className={Css['guPlaDSLinr1']+' '+Css['borT']}></div>
                        </div>
                        <div className={Css['guPlaDS9']}>
                            <div className={Css['guPlaBC']}>
                                <p>B2C个人服务</p>
                            </div>
                            <div className={Css['guPlaDSLinr']+' '+Css['borL']}></div>
                        </div>
                    </div>
                </div>
            </div>
            <div className={Css['guProTab']}>
                <div style={{'height':'1px'}}></div>
                <div className={Css['guProTabCen']+' swiper-container'} id="gallery">
                    <div className={'swiper-wrapper'}>
                        {
                            props.aPro!==undefined && props.aPro.aProBig!==undefined?
                                   props.aPro.aProBig.map((item,index)=>{
                                       return(
                                           <div className={'swiper-slide'} key={index}>
                                               <div className={Css['guProBox']}>
                                                   <div className={Css['guproTabL']}>
                                                       <img data-src={item.img}
                                                            className="swiper-lazy" alt=''/>
                                                       <div className="Loading"></div>
                                                   </div>
                                                   <div className={Css['guproTabR']}>
                                                       <div className={Css['guproTabRCen']}>
                                                           <div className={Css['guproTabRTitle']}>
                                                               <p>{item.title}</p>
                                                               <span>{item.subtitle}</span>
                                                           </div>
                                                           <p className={Css['guproTabRCenP']} dangerouslySetInnerHTML={{__html:item.list}}></p>
                                                           <div className={Css['guProTabBtn']} onClick={props.goPages.bind(this,item.url)}>{item.btn}</div>
                                                       </div>
                                                   </div>
                                               </div>
                                           </div>
                                       )
                                   })
                                :''
                        }
                    </div>
                </div>
                <div className={Css['guProTabCenthumbs']+' swiper-container'} id="thumbs">
                    <div className={'swiper-wrapper'}>
                        {
                            props.aPro!==undefined && props.aPro.aProSmall!==undefined?
                                props.aPro.aProSmall.map((item,index)=>{
                                    return(
                                        <div className={Css['swiper-slide']+' swiper-slide'} key={index}>{item.title}{index===3?' ':<i className={Css['line']}></i>}</div>
                                    )
                                })
                                :''
                        }

                    </div>
                </div>
            </div>
            <div className={Css['guInfoCen']}>
                <div className={Css['guInfoCenTitle']}>方案实施</div>
                <ul>
                    {
                        props.aInfo!==undefined?
                            props.aInfo.map((item,index)=>{
                                return(
                                    <li key={index}>
                                        <em></em>
                                        <div className={Css['liHover']}>
                                            <i className={item.icn}></i>
                                            <div className={Css['guInfoCenFont']}>
                                                <p>{item.title}</p>
                                                <span dangerouslySetInnerHTML={{__html:item.list}}></span>
                                            </div>
                                        </div>
                                    </li>
                                )
                            })
                            :''
                    }
                </ul>
            </div>
            <div className={Css['guSeleclt']}>
                {
                    props.aCont!==undefined?
                        <ScrollParallax
                            className={Css['guSeleclt_bg']}
                            style={{backgroundImage:'url('+props.aCont.bg+')'}}
                            animation={{y:0, playScale: [0, 1.5]}}
                        ></ScrollParallax>
                        :''
                }
                <div className={Css['guSelecltTite']}>选择我们</div>
                <div className={Css['guSelecltCen']}>
                    <ul>
                        {
                            props.aCont!==undefined && props.aCont.cont!==undefined?
                                props.aCont.cont.map((item,index)=>{
                                    return(
                                        <li key={index}>
                                            <div className={Css['liHover']}>
                                                <div className={Css['guSelecltCenImg']}>
                                                    <i className={item.icn}></i>
                                                </div>
                                                <div className={Css['guSelecltCenFont']}>
                                                    <p>{item.title}</p>
                                                    <span dangerouslySetInnerHTML={{__html:item.list}}></span>
                                                </div>
                                            </div>
                                        </li>
                                    )
                                })
                                :''
                        }
                    </ul>
                </div>
            </div>
            <div className={Css['guContent']}>
                {
                    props.asece!==undefined?
                        <ScrollParallax
                            className={Css['guContent_bg']}
                            style={{backgroundImage:'url('+props.asece.bg+')'}}
                            animation={{y:0, playScale: [0, 1]}}
                        ></ScrollParallax>
                        :''
                }

                <div className={Css['guContentCen']}>
                    <div className={Css['guConTitle']}>{props.asece!==undefined?props.asece.title:''}<p>{props.asece!==undefined?props.asece.phon:''}</p></div>
                    {
                        props.asece!==undefined && props.asece.btn!==undefined?
                            props.asece.btn.map((item,index)=>{
                                return(
                                    <div className={Css['guConBtn']} id={item.id} key={index} onClick={props.goPages.bind(this,item.url)}>{item.title}</div>

                                )
                            })
                            :''
                    }
                </div>
            </div>
        </div>
    )
})
class group extends React.Component{
    constructor(){
        super();
        this.state={
            title:'成长型企业平台-中智关爱通',
            description:'弹性福利,弹性福利平台,弹性福利外包,弹性福利外包,弹性福利供应商,企业弹性福利,员工弹性福利',
            keywords:'关爱通为企业提供弹性福利解决方案,以积分发放形式满足全体员工个性化需求,控制企业总体成本解决企业成本管理和员工满意度的矛盾',
            aBan:[],
            aPro:[],
            aInfo:[],
            aCont:{},
            asece:{}
        }
    }
    componentDidMount(){
        this.goSystem();
        setTimeout(()=>{
            this.getABanData();
            this.getAProData();
            this.getAInfoData();
            this.getAContData();
            this.getAaseceData()
        },100)
        changeTdk(this.state.title,this.state.description,this.state.keywords);
        setScrollTop(window.base.pages.index.iScrollTop);
    }
    //获取banner数据
    getABanData(){
        //this.props.dispatch(action.actGroup.actGroup())
        let temABan=[],sUrl='group.json';
        request(sUrl,'get').then((res)=>{
            if(res.code===200){
                temABan=res.aBan;
                this.setState({aBan:temABan})
            }
        })
    }
    //获取产品数据
    getAProData(){
        let temApro=[],sUrl='group.json';
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                temApro=res.aPro
                this.setState({aPro:temApro})
            }

        })
    }
    //获取优势
    getAInfoData(){
        let temAInfo=[],sUrl='group.json';
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                temAInfo=res.info;
                this.setState({aInfo:temAInfo})
            }
        })
    }
    //获取选择我们
    getAContData(){
        let temACont={},sUrl='group.json';
        request(sUrl,'get').then((res)=>{
            if (res.code===200) {
                temACont=res.content;
                this.setState({aCont:temACont})
            }
        })
    }
    //获取联系我们
    getAaseceData(){
        let temasece={},sUrl='group.json';
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                temasece=res.botContent;
                this.setState({asece:temasece})
            }
        })
    }
    //判断跳转平台
    goSystem(){
        goSystem(this.props,'growingup')
    }
    //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
    componentWillUnmount(){
        window.removeEventListener('scroll',setScrollTop());
        this.setState=(state,callback)=>{
            return;
        }
    }
    render(){
        let newProps={
            aBan:this.state.aBan,
            aPro:this.state.aPro,
            aInfo:this.state.aInfo,
            aCont:this.state.aCont,
            asece:this.state.asece
        }
        return(
            <div>
                <Suspense　fallback={<div className={'loadWidth'}></div>} >
                    {/*导航*/}
                    <Nav props={this.props}></Nav>
                    {/*导航*/}
                    {/*右导航*/}
                    <RNav props={this.props}></RNav>
                    {/*右导航*/}
                </Suspense >
                <Group {...this.props} {...newProps}></Group>
                <Suspense　fallback={<React.Fragment/>}>
                    {/*foot*/}
                    <Foot  props={this.props}></Foot>
                    {/*foot*/}
                </Suspense>
            </div>
        )
    }
}
export default group